<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>余额宝 - 支付宝</title>
		<link rel="stylesheet" href="../css/yeb.css" />
		<link rel="icon" href="../img/favicon.ico" type="image/x-icon" />
		<script type="text/javascript">
			var i=2;
			var q=0;
			function left_move()
			{
				i=i-1;
				var ipt1=document.getElementById('ipt1')
				if(i==1){
					var m=document.getElementsByClassName('dda4');
				    m[0].style.animation="a 1s forwards" ;
				    q=q+1;
				}
				else{if(i==0)
					{
						var m=document.getElementsByClassName('dda4');
				    	m[0].style.animation="b 1s forwards" ;
				    	ipt1.style.display="none";
				    	i=i-1;
				    	q=q+1;
					}
				}
			}

			function right_move()
			{
				q=q-1;
				var ipt2=document.getElementById('ipt2')
				if(q==1)
					{
					var m=document.getElementsByClassName('dda4');
				    m[0].style.animation="aa 1s forwards" ;
				    i=i+1;
				    ipt1.style.display="block";
					}
				else{
					if(q==0)
						{
						var m=document.getElementsByClassName('dda4');
				    	m[0].style.animation="bb 1s forwards" ;
				    	ipt2.style.display="none";
				    	i=i+1;
						}		
					}
			}
		</script>
	</head>
	<body>
		<div class="da">
			<span class="daa">
				<a href="#">手机支付宝</a> 
			</span>
			<span class="dab">
				你好，**  <a href="#">-退出|</a> <a href="#">我的支付宝|</a>  <a href="#">存金宝 |</a> <a href="#">基金|</a>  <a href="#">蚂蚁达客|</a>  <a href="#">蚂蚁聚宝|</a>
			</span>
		</div>
		<div class="da1">
			<div class="da2">
				<img src="../img/a2.png" />
				<div class="da21">
					<a href="#" style="text-decoration: none;color: #1a1a1a;">余额宝</a> 
				</div>
			</div>
		</div>
		<div class="da3">
			<div class="da31">
				<table >
					<tr  >
						<td colspan="2" style="width: 626px;height: 94px;border-right: 1px solid #f2f2f2;">
						<span style="width: 96px;height: 14px;display:inline-block;float: left;font-size: 14px;margin-left: 20px;">可用金额(元)</span>
						<div style="width: 620px;height: 72px;display: inline-block;float: left;">
							<span style="width: 94px;height: 72px;line-height: 72px;font-size: 46px;color: sandybrown;float: left;margin-left: 20px; ">0.00</span>
							<a href="#"><input type="button" value="转入" style="width: 82px; height: 32px;background-color: dodgerblue;margin-top: 20px;margin-left: 20px;border-radius: 10px;" /></a>
							<a href="#" style="margin-left: 20px;text-decoration: none;">转出</a>
						</div>
						</td>
					</tr>
					<tr  style="width: 626px;height: 105px;border-right: 1px solid #f2f2f2;">
						<td style="width: 280px; background-color: white;border-top: 1px solid #f2f2f2;">
							<span style="width: 280px;height: 14px;display:inline-block;float: left;font-size: 14px;border-right: 1px solid #f2f2f2;margin-left: 20px;margin-bottom: 10px;">总金额(元)</span>
							<div style="width: 280px;height: 45px;font-size: 35px;border-right: 1px solid #f2f2f2;margin-left: 20px;margin-bottom: 20px;">0.00</div>
						</td>
						<td style="width:320px; background-color: white;border-top: 1px solid #f2f2f2;">
							<span style="width: 320px;height: 14px;display:inline-block;float: left;font-size: 14px;border-right: 1px solid #f2f2f2;margin-left: 20px;margin-bottom: 10px;">不可用金额(元)</span>
							<div style="width:320px;height: 45px;font-size: 35px;border-right: 1px solid #f2f2f2;margin-left: 20px;margin-bottom: 20px;">0.00</div>
						</td>
					</tr>
				</table>
				<div class="da32">
					<div class="da321">
						<div style="width: 140px;height: 60px;line-height: 60px; text-align: bottom;">昨日收益(元)</div>
						<div style="width: 140px;height: 40px">客官别急</div>
					</div>
					<div class="da322">
						<div style="width: 140px;height: 60px;line-height: 60px; text-align: bottom;">历史累计收益(元)</div>
						<div style="width: 140px;height: 40px; ">0.00</div>
					</div>
					<div class="da323">
						<div style="width: 140px;height: 60px;line-height: 60px; text-align: bottom;">七日年化收益率</div>
						<div style="width: 140px;height: 40px; ">3.4280%</div>
						<!--<div style="width: 140px;height: 29px;line-height: 29px; ">客官别急</div>-->
					</div>
					<div class="da324">
						<div style="width: 140px;height: 60px;line-height: 60px; text-align: bottom;">每万份收益(元)</div>
						<div style="width: 140px;height: 40px; ">0.9154</div>
					</div>
				</div>
			</div>
			<div class="da4">
				<input id="ipt1" value="<" type="button" style="width: 20px;height: 20px; position: absolute;left: 181px;top:506px;z-index: 1; width: 15px;height: 15px;"  onclick="left_move()"/>
				<input id="ipt2" value=">" type="button" style="width: 20px;height: 20px; position: absolute;left: 866px;top:506px;z-index: 1; width: 15px;height: 15px;" onclick="right_move()"/>
				<div class="dda4" >
					<div id="1" class="dda41">
						<div class="dda411">
							<img src="../img/a3.png" />
						</div>
						<div class="dda412">
							<ul>
								<li>
									<a href="#" style="text-decoration: none;"> 关闭</a>
								</li>
								<li>
									<input value="设置" type="button" style="width: 60px;height: 20px;margin-left: 90px;background-color: cornflowerblue;color: white;" />
								</li>
							</ul>
						</div>
					</div>
					<div id="2" class="dda42">
						<img src="../img/a31.png" />
					</div>
					<div id="3" class="dda43">
						<img src="../img/a5.png" />
					</div>
				</div>
			</div>
			<div class="da5">
				<img src="../img/a4.png" />
			</div>
			<div class="da6">
				<ul style="padding: 0px; " >
					<li style="background-color: white;">
						转入
					</li>
					<li style="background-color: white;">
						转出
					</li>
					<li style="background-color: white;">
						收益
					</li>
				</ul>
				<div class="da61">
					<div class="ca1">
						<input type="text" style="width: 98px;height: 32px;border: 1px solid #a6a6a6; margin: none;" />
					</div>
					<div class="ca2">
						<input type="text" style="width: 98px;height: 32px;border: 1px solid #a6a6a6; margin: none;" />
					</div>
					<div class="ca3">
						<input type="button" value="搜索" style="width: 76px;height: 32px;margin-top: 5px; background-color: white;color: #000000;" />
					</div>
					<div class="ca4">
						<input type="button" value="下载" style="width: 76px;height: 32px;margin-top: 5px;background-color: white;color: #000000;" />
					</div>
					<div class="ca5">
						<input type="button" value="30天" style="width: 76px;height: 32px;margin-top: 5px;background-color: white;color: #000000;" />
					</div>
				</div>
				<div class="da7">
					<img src="../img/a7.png" />
				</div>
			</div>
			<div class="da8">
					<div class="da81">2018-08-02 07:38</div>
					<div class="da82">0.00</div>
					<div class="da83">余额自动转入</div>
					<div class="da84">
						<a href="#">查看</a>
					</div>
				</div>
			<div class="da9">
				<div class="da91">
					<span style="width: 66px;height: 24px;">
						<input type="button"style="width: 66px;height: 24px;" value="上一页"/>
					</span>
					1
					<span style="width: 66px;height: 24px;">
						<input type="button"style="width: 66px;height: 24px;"value="下一页" />
					</span>
					<span style="width: 39px;height: 14px;">1/1</span>
					<span style="width: 36px; height: 24px;">
						<input type="text"style="width: 36px; height: 22px;border: 1px solid #444444;" />
					</span>
					<span style="width: 36px; height: 24px;">
						<input type="button"style="width: 66px;height: 24px;"value="跳转" />
					</span>
				</div>
			</div>
		</div>
		<div class="da0">
			<div class="da01">
				<a href="#">诚征英才</a> | <a href="#">联系我们</a> | <a href="#">International Business</a>
			</div>
			<div class="da02">
				<a href="#">ICP证：沪B2-20150087</a> 
			</div>
		</div>
	</body>
</html>
